const user_event_index = {
    template:`
            <div class="mt-4">
                <h1 class="h2 py-4">Event List</h1>
                <div class="row">
                    <div class="col-4 mb-5" v-for="(item,index) in events" :key="index">
                        <div class="card">
                            <img :src="item.photo" class="w-100 event-list-cover">
                            <div class="card-body border-bottom">
                                <div class="d-flex justify-content-between">
                                    <span class="card-title h5 m-0">{{item.name}}</span>
                                    <span class="card-title h5 m-0">{{item.type}}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span class="">{{item.date}}</span>
                                    <span class="">{{item.permission}}</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <button class="btn btn-primary w-100" @click="enroll(item)">Join Now</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
    `,
    data(){
        return {
            events:null
        }
    },
    methods:{
        get_events(){
            ajax.get('event-list').then(res => {
                if (res.status === 200){
                    this.events = res.data.data;
                }
            })
        },
        enroll(event){
          if (event.permission != 'Public'){
              let event_code = window.prompt('Verification event code');
              ajax.get(`event/check/${event.id}/${event_code}`).then(res =>{
                  if (res.status === 200){
                      this.$router.push({name:`user.enroll.index`,params:{event_id:event.id},query:{event_name:event.name}});
                  }
              })
          }else {
              this.$router.push({name:`user.enroll.index`,params:{event_id:event.id},query:{event_name:event.name}});
          }
        }
    },
    mounted() {
        this.get_events();
    }
}